<template>
  <div class="table-classic-wrapper">
    <el-card>

      <!--搜索栏 -->
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-form
              :inline="true"
              label-width="90px"
              class="search-form">

            <el-form-item>
              <el-input placeholder="输入评价内容进行搜索" v-model="searchForm.appraiseInformation" style="width: 240px;">
                <i slot="suffix" class="el-input__icon el-icon-search"
                   @click="searchMyCommentList()"></i>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="danger" @click="getMyCommentList">全部评价信息</el-button>
            </el-form-item>
          </el-form>

        </el-col>
      </el-row>

      <!--购买记录表格-->
      <el-table
          :data="myCommentList"
          @selection-change="handleSelectionChange"
          stripe
          :cell-style="{textAlign: 'center'}"
          :header-cell-style="{textAlign: 'center'}"

          style="width: 100%">

        <el-table-column type="selection" width="50"/>

        <el-table-column
            prop="picture"
            label="美食图片"
            align="center">
          <template slot-scope="scope">
            <el-image
                style="width: 40px; height: 40px"
                :src="handlerImg(scope.row.picture)"
                fit="fill"></el-image>
          </template>
        </el-table-column>

        <el-table-column
            prop="text"
            label="美食名称">
        </el-table-column>

        <el-table-column
            label="餐厅服务评价">
          <template slot-scope="scope">
            <el-rate
                v-model="scope.row.appraiseService"
                disabled
                show-score
                text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>

        <el-table-column
            prop="appraiseInformation"
            label="针对美食的评价内容">
        </el-table-column>

        <el-table-column
            prop="gmtCreate"
            label="评论时间"
            :formatter="formatDate"
            align="center">
        </el-table-column>

      </el-table>

      <!--分页-->
      <Pagination :total="total" :page="currentPage" :limit="pageSize" @pagination="handlePageChange"></Pagination>

    </el-card>
  </div>
</template>

<script>
import Pagination from "@/component/pagination/Pagination";
import {getUserInformation} from "@/api/user";
import {getGeneralUserById} from "@/api/general/userGeneral";
import {selectInformationByUserId, selectInformationByUserIdAndAppraiseInformation} from "@/api/user/comment";

export default {

  name: "MyComment",

  components: {
    Pagination
  },

  data() {
    return {
      /**
       * 搜索内容
       */
      searchForm: {
        appraiseInformation: ''
      },

      total: 0,//订单总数
      currentPage: 0,//当前页码
      pageSize: 6,//每页显示条数

      originalTotal: 0,//原始订单总数

      /**
       * 评论列表
       */
      myCommentList: [],

      /**
       * 多选数据暂存数组
       */
      multipleSelection: [],

      /**
       * 当前用户
       */
      user: undefined,
    }
  },

  created() {
    this.getGeneralUserById();
  },

  methods: {

    /**
     * 获取用户评论列表
     */
    getMyCommentList() {
      const formData = new FormData();

      formData.append("userId", this.user.id);
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      selectInformationByUserId(formData).then(res => {
        this.myCommentList = res.information;
        this.total = res.total;
        this.originalTotal = this.total;
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })

      // this.axios.get("/myCommentList",{
      // }).then(res => {
      //   this.myCommentList = res.data.data.records
      // })
    },

    /**
     * 获得用户信息
     */
    getGeneralUserById() {
      const user = eval('(' + getUserInformation() + ')');

      const formData = new FormData();

      formData.append("id", user.id);


      getGeneralUserById(formData).then(res => {
        this.user = res.user;
        this.getMyCommentList();
      }).catch(() => {
        this.$message.error("用户信息获取失败");
      })
    },

    /**
     * 根据评价内容查找评价信息
     */
    searchMyCommentList() {
      const formData = new FormData();

      formData.append("userId", this.user.id);
      formData.append("appraiseInformation", this.searchForm.appraiseInformation);
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      if (this.searchForm.appraiseInformation === '') {
        this.$message.warning("请输入评价内容");
        this.myCommentList = [];
        this.total = 0;
      } else {
        selectInformationByUserIdAndAppraiseInformation(formData).then(res => {
          this.myCommentList = res.information;
          this.total = res.total;
          this.searchForm.appraiseInformation = '';
        }).catch(() => {
          this.$message({
            message: "error",
            type: "error"
          })
        })
      }
    },

    /**
     * 多选操作，与multipleSelection相对应
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 处理分页
     */
    handlePageChange(val) {
      this.currentPage = val.page;
      if (this.originalTotal === this.total) {
        this.getMyCommentList();
      } else {
        this.searchMyCommentList();
      }
    },

    /**
     * 修改购买或收货时间格式
     */
    formatDate(row) {
      var date = new Date(row.gmtCreate);

      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();

      if (month < 10) {
        month = '0' + month;
      }

      if (day < 10) {
        day = '0' + day;
      }

      if (hour < 10) {
        hour = '0' + hour;
      }

      if (minute < 10) {
        minute = '0' + minute;
      }

      if (second < 10) {
        second = '0' + second;
      }

      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    },

    /**
     * 展示图片
     */
    handlerImg(picture){
      console.log("data:image/jpeg;base64," + picture)
      return "data:image/jpeg;base64," + picture
    },
  }

}
</script>

<style scoped>


</style>
